---
title: "Color Swatch Picker"
description: A grid-based selection tool that presents a set of predefined colors for easy and consistent color choices.
order: 5
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html#props"]
---

## Basic
A color swatch picker allows users to choose a color from a predefined set.
<How toUse="colors/color-swatch/color-swatch-picker-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/color-swatch-picker
```

## Composed components
<Composed components={['color-swatch']}/>

## Manual installation
```bash
npm i react-aria-components
```
<SourceCode toShow='color-swatch-picker'/>

## Anatomy
```
import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/ui/color-swatch-picker"
```

```
<ColorSwatchPicker aria-label="Pick color">
  <ColorSwatchPickerItem color="#f59e0b" />
  <ColorSwatchPickerItem color="#84cc16" />
  <ColorSwatchPickerItem color="#0d6efd" />
</ColorSwatchPicker>
```

## Controlled
The color swatch can be managed in a controlled manner.
<How toUse="colors/color-swatch/color-swatch-controlled-demo" />

## Disabled
While you can disable individual picker items, disabling the entire picker is possible but generally not recommended.
<How toUse="colors/color-swatch/color-swatch-picker-item-disabled-demo" />
